<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <!-- 左侧菜单栏 -->
        <AsideCom :collapse=collapse  @getBrand="brandData"></AsideCom>
      </el-aside>
      <!-- 右侧区域 -->
      <el-container>

        <!-- 右侧头部区域 -->
        <el-header>
      <!-- 菜单折叠按钮 -->
            <el-icon color="#fff" size="25px" class="no-inherit"  @click="CHANGE_COLLAPSE">
              <component :is="headerLeft"></component>
            </el-icon>
          <!-- 右侧个人信息 -->
          <!-- 详情信息看组件下拉菜单 -->
            <el-dropdown @command="handleCommand">
          <el-button type="primary" >
            欢迎：{{ adminname }}
            <el-icon><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="head">头像设置</el-dropdown-item>
              <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="personal">个人中心</el-dropdown-item>
              <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
          
          
         
       
        
        </el-header>
        <!-- 右侧内容区域 -->
        <el-main>
          <!-- 面包屑 -->
          <!-- to是跳转页面 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
            v-for="item in brandArr"
            :to="{ path: item.path }"
            >{{ item.title }}</el-breadcrumb-item
          >
         
          </el-breadcrumb>
        <!--需要配置二级路由出口  -->
        <div class="main">
          <RouterView></RouterView>

        </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div>

  </div>
</template>

<script>
// 导入状态管理器的辅助函数
import {mapMutations,mapState } from 'vuex'
// 导入左侧菜单栏
import AsideCom from '@/components/AsideCom.vue';
import { RouterView, RouterLink } from "vue-router";
export default {
  data() {
    return {
      adminname:'',
      brandArr: [],
    }
  },
  components: { AsideCom, RouterView},
computed:{
...mapState(['collapse']),
headerLeft(){
  return this.collapse? 'Expand' : 'Fold'
},
  // 该计算属性是用来计算侧边栏的宽度
  asideWidth () {
      return this.collapse ? '60px' : '200px'
    }
},
  methods:{
    handleCommand(command){
      console.log(command);
      if(command =='loginOut'){
        // 退出登录的时候清除所有之前保存到数据
        localStorage.removeItem('token')
        localStorage.removeItem('login')
        // 再跳转到登录页面
        this.$router.push("/login");

      }
    },
    // 结构出这个方法
    ...mapMutations(["CHANGE_COLLAPSE"]),
    brandData(arr) {
      console.log("arr", arr);
      this.brandArr = arr;
    },

  },
  created(){
    this.adminname = JSON.parse(localStorage.getItem('login')).adminname
  }
 
}
</script>

<style lang="less" scoped>
.common-layout {

  height: 100%;

  .el-container {
    height: 100%;
  }
}

.el-aside {
  // height: 100%;
  background-color: black;
  width: v-bind(asideWidth);
  transition: all .2s;
}

.el-header {
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;

}


.el-main {
  background-color: #fff;
}
.main {
  margin-top: 5px;
}</style>